<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>日历排班</title>
    <link rel="stylesheet" href="/paiban/base.css" />
    <link rel="stylesheet" href="/static/plugs/calendar/calendar.css" />
    <script src="/static/plugs/jquery/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/static/plugs/layer/layer.css">
    <script src="/static/plugs/layer/layer.js"></script>
    <style type="text/css">
    * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            font-size: 13px;
            background-color: #fff;
        }

        a:link,
        a:visited,
        a:hover {
            color: #34a6f8;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        .title {
            margin: 0 2em;
            text-align: center;
            height: 80px;
            line-height: 80px;
            font-family: Georgia, Arial, sans-serif;
            overflow: hidden;
        }

        .version {
            font-size: 14px;
        }

        .calendar {
            position: relative;
            z-index: 1;
            margin: 0 2em 2em;
            padding: 2em;
            box-sizing: border-box;
            box-shadow: 0 0 15px #ddd;
            font-family: 'Microsoft YaHei UI', Arial, sans-serif;
            overflow: hidden;
        }

        .feature {
            margin: 0 auto;
            padding: 0 15px;
            font-weight: 500;
            overflow: hidden;
        }

        .demo {
            position: relative;
            z-index: 1;
            margin: 1.5em auto;
          
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            overflow: hidden;
        }
        .demo-example,
        .demo-usage {height:300px;
            position: relative;
            z-index: 1;
            padding: 15px;
           
            box-sizing: border-box;
            overflow: hidden;
        }
        .demo-example:after {
                position: absolute;
                z-index: 2;
                top: 0;
                right: 0;
                height: 100%;
                width: 1px;
                background-color: #ddd;
                overflow: hidden;
                content: ' ';
            }

        .demo-pre {
            height: 100%;
            padding: 15px;
            background-color: #f8f8f8;
            box-sizing: border-box;
            overflow: auto;
        }

            .demo-pre:hover {
                background-color: #f1f1f1;
            }

        .demo-code {
            line-height: 150%;
            font-size: 14px;
            font-family: 'Courier New', Consolas, 'Microsoft YaHei UI', Arial, sans-serif;
        }

        .copyright {
            margin: 0 auto;
            line-height: 150%;
            text-align: center;
            font-size: 14px;
            padding: 0 0 1.5em;
            overflow: hidden;
        }

        /*美化chrome滚动条*/
        ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
            -webkit-border-radius: 5px;
        }

        ::-webkit-scrollbar-track-piece {
            -webkit-border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb:vertical {
            background-color: rgba(0, 0, 0, .10);
            -webkit-border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb:horizontal {
            background-color: rgba(0, 0, 0, .10);
            -webkit-border-radius: 5px;
        }

        ::-webkit-scrollbar:hover {
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, .15);
        }
    .banci {padding:10px;height:50px;}
    .banci .sj-item{width:100px;float:left;border:1px solid #eee;
        padding:8px 5px;border-radius: 5px;text-align: center;
        margin-right:20px;
    }
    .banci .active{background-color:#333;color:#fff;}
    .lei{padding:10px;margin-top:10px;}
    .lei li{float:left;margin-right:10px;list-style:none;padding:8px 15px;border-radius: 5px;background-color:#efefef;
        margin-bottom: 20px;
    }
    .lei li.active{background-color:#333;color:#fff;}
    .clear{clear:both;}
    .btn{width:120px;}
    #user_id{border:1px solid #ccc;padding:5px;}
    </style>
  </head>
  <body>
      <div class="wrap">
          <div class="left">
              {include file="menu"}
          </div>
          <div class="right">
      <div class="calendar">
          <div class="demo">
          <div class="demo-example" id="dates-view"></div>
          <div class="demo-usage">
              <div class="lei">
                  <select id="user_id" onchange="sel_user_id(this.value)"><option value="0">=选择用户=</option>
                  {foreach $user as $v}
                  <option value="{$v.id}">{$v.name}</option>
                  {/foreach}
                  </select>
              </div>
              <div class="banci">
                  <div id="sj_1" class="sj-item" onclick="sel_banci(1)">上午</div>
                  <div id="sj_2" class="sj-item" onclick="sel_banci(2)">下午</div>
                  <div id="sj_3" class="sj-item" onclick="sel_banci(3)">晚上</div>
                  <div id="sj_4" class="sj-item" onclick="sel_banci(4)">全天</div>
              </div>
              <div class="lei">
                  <ul>{foreach $banlei as $v}
                      <li class="" data-id="{$v.id}">{$v.name}</li>
                      {/foreach}
                  </ul>
              </div>
              <div class="clear"></div>
              <div class="btn btn-primary" onclick="save()"> 保存 </div>
          </div>
          </div>
      </div></div></div>
    <script src="/static/plugs/calendar/calendar.js" type="text/javascript"></script>
    <script>
    var days=[];
    var banci=0;
    var banlei=0;
    var user_id=0;
    function sel_banci(id)
    {
        $("#sj_1").removeClass('active');
        $("#sj_2").removeClass('active');
        $("#sj_3").removeClass('active');
        $("#sj_4").removeClass('active');
        $("#sj_"+id).addClass('active');
        banci=id;
    }
    function sel_user_id(v)
    {
        user_id=v;
    }
    function save(){
        var formdata={
            'ban_date':days,
            'banci':banci,
            'banlei':banlei,
            'user_id':user_id
        }
        if(user_id==0)
        {
            layer.msg('请选择用户')
            return;
        }
        if(banci==0)
        {
            layer.msg('请选择班次')
            return;
        }
        if(banlei==0)
        {
            layer.msg('请选择类型')
            return;
        }
        $.post('/paiban/admin/bansave',formdata,function(res){
            console.log(res)
            if(res.code==1)
            {
                layer.msg('设置成功');
            }
            else
            {
                layer.msg('设置失败');
            }
        })
    }
    $(function(){
        $(".lei li").each(function(){
            $(this).click(function(){
                banlei = $(this).data('id');
                $(this).addClass('active')
                remove_li_active(banlei);
            })
        })
        $(".lei li").each(function(){
            $(this).click(function(){
                banlei = $(this).data('id');
                $(this).addClass('active')
                remove_li_active(banlei);
            })
        })
    })
    function remove_li_active(id)
    {
        $(".lei li").each(function(){
           var _banlei = $(this).data('id');
           if(_banlei!=id)
           {
                $(this).removeClass('active')
            }
        })
    }
    var calDates = new Calendar({
      // 设置显示位置
      parent: 'dates-view',
      // 初始化显示时间
      //time: '',
      // viewMode：
      // 0 - 日期模式（默认值）
      viewMode: 0,
      // 配置日期选择的事件处理器 onDatePick，参数如下：
      // time - 选中的日期时间
      // $el - 点击的 DOM 节点
      // calendar - 日历控件的实例
      //pickMode: 'multiple',
      onDatePick: function(time, $el, calendar) {
          days=time;
          console.log(time)
      },
//    onTodayPick: function (time, $el, calendar) {
//        console.log('选择时间：', time)
//    }
    })
    </script>
  </body>
</html>
